@import "style";
@color: white;
@rem: 1/200rem;
@fontSize:#af9d87;
body{
    .bgColor(#f0f0f0);
}
.center{
    margin: 0 auto;
};
.button{
    .wh(270*@rem,91*@rem);
    background-image: url("../images/btn_bg.png");
    background-size: 100% 100%; 
    .lineH(91*@rem);
    display: block;
    .rel();
    margin: 0 auto;
    z-index: 22;
    &>span{
        .fs(25*@rem);
        font-weight: bold;
        .tc();
        .pl(30*@rem);
        .pt(10*@rem);
        display: block;
        color: #6d1b00;
    }
}
.buttonActive{
    .wh(180*@rem,71*@rem);
    background-image: url("../images/btn_bg.png");
    background-size: 100% 100%; 
    .lineH(71*@rem);
    display: block;
    .rel();
    margin: 0 auto;
    z-index: 22;
    &>span{
        .fs(20*@rem);
        font-weight: bold;
        .tc();
        .pl(30*@rem);
        .pt(10*@rem);
        display: block;
        color: #6d1b00;
    }
}
.record_list_bg{
    .abs();
    .wh(100%,100%);
    background: url(../images/bg_01.png) top center no-repeat;
    background-size: 100% 100%;
    .input_bg{
        .rel();
        .w(100%);
        .center();
        .input{
            .wh(60%,73*@rem);
            .center();
            .mt(20*@rem);
            .rel();
            .lineH(73*@rem);
            background-image: url("../images/input.png");
            background-size: 100% 100%;
            &>input{
                .fs(25*@rem);
                color: @fontSize;
                .pl(22*@rem);
                &::-webkit-input-placeholder{
                    .fs(25*@rem);
                    color: @fontSize;
                }
            }
            &.date,&.type{
                .icon{
                    .absR(65*@rem,25*@rem);
                    .wh(30*@rem,30*@rem);
                    background: url(../images/icon_1.png) no-repeat 0 0;
                    .bgSize(100% auto);
                    vertical-align: middle;
                }
            }
        }
        .choose_area{
            .w(60%);
            margin: 0 auto;
            .mt(16*@rem);
            .title{
                .w(100%);
                margin: 0 auto;
                .fs(25*@rem);
                color: black;
            }
            .step{
                display: inline-block;
                .ml(20*@rem);
                .mt(20*@rem);
                &>i{
                    .wh(26*@rem,26*@rem);
                    background-image: url("../images/check.png");
                    background-size: 100% 100%;
                    vertical-align: middle;
                    display: inline-block;
                    &.active{
                        .wh(26*@rem,26*@rem);
                        background-image: url("../images/checked.png");
                        background-size: 100% 100%;
                    }
                }
                &>span{
                   color:#6d1b00;
                   .fs(24*@rem);
                   vertical-align: middle;
                   display: inline-block;
                }
            }
        }
        .textarea{
            .wh(60%,152*@rem);
            background-image: url("../images/textarea.png");
            background-size: 100% 100%;
            .center();
            .mt(20*@rem);
            .of();
            .rel();
            &>textarea{
                .wh(310*@rem,100%);
                .bgColor(rgba(0,0,0,0));
                outline:none;
                resize:none;
                .fs(25*@rem);
                color: @fontSize;
                .ml(22*@rem);
                .mt(10*@rem);
                &::-webkit-input-placeholder{
                    .fs(25*@rem);
                    color: @fontSize;
                }
            }
            .wordwrap{
                .fs(22*@rem);
                .absRB(10*@rem,10*@rem);
            }
        }
        .to_submit{
            .button();
            .mt(50*@rem);
        }
    }
}
/*话费充值确认*/
.sure{
    .rel();
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    overflow: auto;
    .sure_bg{
        .wh(473*@rem,687*@rem);
        background-image: url("../images/bg_02.png");
        background-size: 100% 100%;
        margin: 0 auto;
        .mt(120*@rem);
        .sure_title{
            .pt(70*@rem);
            .fs(25.93*@rem);
            color: #333333;
            .tc();
        }
        &>ul{
            .pl(50*@rem);
            .w(300*@rem);
            margin: 0 auto ;
            .mt(50*@rem);
            &>li{
                .wh(440*@rem,55*@rem);
                margin: 0 auto;
                .of();
                .fs(20*@rem);
                .lineH(55*@rem);
                &>span{
                    //.fl();
                    .lineH(55*@rem);
                    display: inline-block;
                }
            }   
        }
        .tip{
            .fs(18*@rem);
            color: #ff0000;
            .lineH(40*@rem);
            .pt(20*@rem);
            .tc();
        }
        
        .buttom{
            .p(20*@rem,40*@rem,130*@rem);
            .to_back{
                .buttonActive();
                .fl();
            }
            .to_sure{
                .buttonActive();
                .fr();
            }
        }
    }
}   

